<template>
	<view class="goods_card" @click="handleDetails">
		<image :src="item?.goodsCover" mode="aspectFill"></image>
		<view class="goods_card_btm">
			<view class="goods_card_title">{{item?.goodsName}}</view>
			<view class="goods_card_price">
				<text class="goods_card_price_2" v-if="item?.discountPrice">￥{{item?.discountPrice}}</text>
			</view>
			<view class="goods_card_price">
				<view class="goods_card_price_1 goods_price18"><text>￥</text>{{item?.originalPrice}}</view>
				<text class="goods_card_price_3" v-if="item?.salesVolume">销量: {{item?.salesVolume}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const { item } = defineProps({
		item: {
			type: Object,
			default: () => ({}),
		},
	});

	/**
	 * 商品详情
	 */
	function handleDetails() {
		uni.$u.route('/pages/goodStuff/goodDetails', {
			id: item?.id
		});
	}
</script>

<style lang="scss" scoped>
	.goods_card {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 10rpx 30rpx 5rpx rgba(149, 157, 165, 0.2);
		width: calc(50vw - 24rpx - 24rpx);

		&>image {
			border-radius: 12rpx 12rpx 0 0;
			height: 308rpx;
			width: calc(50vw - 24rpx - 24rpx);
			display: block;
			padding-bottom: 20rpx;
		}

		.goods_card_btm {
			padding: 0 12rpx;

			.goods_card_title {
				width: calc(50vw - 24rpx - 24rpx - 24rpx);
				font-size: 34rpx;
				font-weight: 500;
				margin: 0 0 10rpx 0;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.goods_card_price {
				padding-bottom: 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:nth-child(2) {
					padding-bottom: 0;
				}

				.goods_card_price_1 {}

				.goods_card_price_3 {
					display: inline-block;
					padding: 4rpx 10rpx;
					color: #FF3535;
					background-color: #FFEAEA;
					font-size: 26rpx;
				}

				.goods_card_price_2 {
					color: #A1A7AD;
					font-size: 28rpx;
					text-decoration: line-through;
				}
			}
		}
	}
</style>